// pages/refund/static/index.js
new Vue({
    el: '#refund_app',
    delimiters: ['[[', ']]'], // 明确设置Vue.js的模板分隔符
    data: {
        message: '所有已支付订单列表',
        orders: [] // 用于存储所有已支付订单
    },
    mounted() {
        this.fetchAllPaidOrders();
    },
    methods: {
        fetchAllPaidOrders() {
            console.log('正在获取所有已支付订单...');
            axios.get('/rzwl/api/orders/all_paid') // 新的API端点，用于获取所有已支付订单
                .then(response => {
                    this.orders = response.data;
                    console.log('所有已支付订单获取成功:', this.orders);
                })
                .catch(error => {
                    console.error('获取所有已支付订单失败:', error.response ? error.response.data : error.message);
                    alert('获取所有已支付订单失败，请稍后再试。');
                });
        },
        initiateRefund(orderId) {
            if (confirm(`确定要对订单号 ${orderId} 发起退款吗？`)) {
                console.log(`发起订单 ${orderId} 的退款请求...`);
                // 这里将调用后端API来处理退款逻辑
                // 假设后端API为 /rzwl/api/wxpay/refund
                axios.post('/rzwl/api/wxpay/refund', { order_id: orderId })
                    .then(response => {
                        alert('退款请求已提交！');
                        console.log('退款请求成功:', response.data);
                        // 刷新订单列表以更新状态
                        this.fetchAllPaidOrders();
                    })
                    .catch(error => {
                        console.error('退款请求失败:', error.response ? error.response.data : error.message);
                        alert('退款请求失败，请稍后再试。');
                    });
            }
        },
        clearCacheAndReload() {
            if (confirm('确定要清理缓存并强制刷新页面吗？这可能解决一些显示问题。')) {
                window.location.reload(true);
            }
        }
    }
});
